<template>
	<view class="wrap" :class="isReceive !==1?'dis-wrapc-olor':''">

			<view class="content">
				<view class="leftContent">
					<view class="amount" :class="isReceive !==1?'disColor':''">
						<view class="couponAmount">
							<text class="amount_unit" :class="isReceive !==1?'disColor':''">¥</text>
							<text class="realAmount" :class="isReceive !==1?'disColor':''">{{discountAmount}}</text>
						</view>
						<text class="useInfo" :class="isReceive !==1?'disColor':''">满{{rangInfo}}元可用</text>
						<view class='leaseType' :class="isReceive !==1?'disColor':''">{{couponType}}</view>
					</view>
					<!-- <view class="contentInfo">
						<text class="activity-name">{{activityType}}</text>
						<text class="useTypeName" style="opacity: 0;">{{useTypeName}}</text>
						<text class="time">{{durationDate}}</text>
						<view class="useType" @click="changeDesc">
							<text class="conponType">{{storeRang}}</text>
							<image class="arrow" src="../../static/coupon/coupon_up.png" mode=""></image>
						</view>

					</view> -->
					

				</view>
				<view class='rightContent1' :class="isReceive !==1?'disrightContent1':''">
					<view class='right-title' :class="isReceive !==1?'distitleColor':''">{{useTypeName}}</view>
					<view class='bottom-box'>
						<view>
							<view class='box-time' :class="isReceive !==1?'disTextColor':''">{{durationDate}}</view>
							<view class='box-text' :class="isReceive !==1?'disTextColor':''">
								<text>{{storeRang}}</text>
								<u-icon name="arrow-down" color="#999999" size="12" style='margin-top:5upx'></u-icon>
							</view>
						</view>
						<view>
							<view class="button" v-if="isReceive == 1 ||  memberCouponStatus == 0" @click="getCoupon">
								{{businessType == 0 ? '立即领取' : '立即使用'}}
							</view>
							<view class="button disBtnColor" v-else-if="businessType == 0">已领取</view>
							<view v-else-if="businessType == 1">
								<view class="button disBtnColor" v-if="memberCouponStatus == 1" >已使用</view>
								<view class="button disBtnColor" v-else-if="memberCouponStatus == 2" >已过期</view>
							
							</view>
						</view>
					</view>
					
				</view>
				<!-- <view class="rightContent">
					<text class="conponType1" :style="{'background-color':(isReceive == 2 ? '#FFF9E0' : '#F2F2F2')} ">{{couponType}}</text>
					<view class="button" v-if="isReceive == 2 | memberCouponStatus == 0" @click="getCoupon">
						{{businessType == 0 ? '立即领取' : '立即使用'}}
					</view>
					<view class="statusWrap" v-else-if="businessType == 0">已领取</view>
					<view v-else-if="businessType == 1">
						<view class="statusWrap" v-if="memberCouponStatus == 1">已使用</view>
						<view class="statusWrap" v-else-if="memberCouponStatus == 2">已过期</view>

					</view>
				</view> -->
			</view>
<!--   -->

			<view class="descWrap" v-if="isShowDesc">
				<text class="descTitle">使用说明: </text>
				<view class="descContent">
					<view class="desc1">
						1. {{applicableUnitType == 1 ? '全场通用' : '部分门店可用'}}
						<!-- <text class="desc2" @click="goStore">查看适用门店></text> -->
					</view>
					<view class="desc1 desc-item">
						2. {{filterNull(useNotice)}}
					</view>
					<!-- <view class="desc1 desc-item">
						3.最终解释权归blablabla店所有
					</view> -->
					<!-- <view class="desc2 desc-item" v-if="useArea!=1" @click="goCar">
						查看指定车型>
					</view> -->
				</view>


			</view>


	</view>
</template>

<script>
	export default {
	  name: 'coupon-cell',
		data() {
			return {
				// receivedBgUrl: '../../static/coupon/coupon_undrawed.png',
				receivedBgUrl: this.baseImageUrl+'uni_rental/优惠券背景_领取前@2x.png',
				unReceivedBgUrl: this.baseImageUrl+'uni_rental/coupon_drawed.png',
				isShowDesc: false
			}
		},
		props: {
			businessId: {
				type: String,
				default:''
			},
			discountAmount: {
				type: String,
				default:''
			},
			rangInfo: {
				type: String,
				default:''
			},
			activityType: {
				type: String,
				default: ''
			},
			durationDate: {
				type: String,
				default: ''
			},
			storeRang: {
				type: String,
				default: ''
			},
			couponType: {
				type: String,
				default: ''
			},
			useNotice: {
				type: String,
				default: ''
			},
			//业务类型 0 更多优惠券使用isReceive做业务判断 1我的优惠券使用memberCouponStatus做业务判断
			businessType : {
				type: String | Number,
				default: 1
			},
		    isReceive: {
				type: String | Number,
				default: 1
			},
			memberCouponStatus: {
				type: String | Number,
				default: -1
			},
			isTurn: {
				type: Number,
				default: 0
			},
			useArea:{
				type: String | Number,
				default: 0
			},
			memberId : {
				type: String,
				default: ''
			},
			useTypeName: {
				type: String,
				default: ''
			},
			applicableUnitType : {
				type:Number,
				default: 1
			},
			objData:{
				type:Object,
				default:{

				}
			},
			isAleart:{
				type:Boolean,
				default:false
			}
		},

		methods: {
			getCoupon() {
				// 是否是弹框
			   if(this.isAleart){
				   this.$emit("getCoupon", this.objData)
			   }else{
				   if(this.businessType == 0){
						this.$emit("getCoupon", {businessId: this.businessId})
					   }else{
						uni.navigateTo({
							// url: '../../pages/coupon/coupon-detail?memberId=' + this.memberId
							url: '/pages/coupon/coupon_use' + uni.$u.queryParams(this.objData)
						})
				   }
			   }
				
			},
			shareCoupon() {
				this.$emit('shareCoupon', {memberId: this.memberId});
			},

			changeDesc() {
				this.isShowDesc = !this.isShowDesc;
			},
			goStore() {
				uni.navigateTo({
					url:'../../pages/coupon/coupon-store?businessId=' + this.businessId
				})
			},
			goCar() {
				uni.navigateTo({
					url: '../../pages/coupon/coupon-car?businessId=' + this.businessId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap {
	// position: relative;
	background-color: #FFFFFF; 
	border-radius: 8upx;
}
.dis-wrapc-olor{
	background-color: #eeeeee;
}

.cover {
	width: 706upx;
	height: 190upx;
	line-height: 190upx;

}

.content {
	display: flex;
	margin-top: 26upx;
	.leftContent {
		display: flex;
		justify-content: center;
		position: relative;
		
		.amount {
			display: flex;
			width: 176upx;
			height: 196upx;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: #DDEFFE;
			border-right:2upx dashed #173B42 ;
			.couponAmount {
				display: flex;
				align-items: flex-start;
			}
			.leaseType{
				position: absolute;
				top:0;
				left: 0;
				font-size: 20upx;
				color:#173B42;
				padding:4upx 12upx;
				background-color: rgba(23, 59, 66, 0.05) ;
				border-radius: 8upx 0 8upx 0;
			}
		}
		.disColor{
			background-color: #EEEEEE ;
			color:#999999;
		}
		.distitleColor{
			background-color: #ffffff;
			color:#999999;
		}
		
		.disTextColor{
			background-color: #ffffff;
			color:#999999;
		}
		.contentInfo {
			display: flex;
			flex-direction: column;
			width: 244upx;
	        margin-right: 10upx;
			.useType {
				display: flex;
				margin-top: 12upx;
				justify-content: space-between;
				align-items: center;
			}
		}

	}
	.rightContent {
		display: flex;
		flex-direction: column;
		align-items: center;

		width: 240upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.rightContent1{
		padding: 32upx;
		width: 100%;
		background-color:#ffffff;
		.right-title{
			font-size:28upx;
			font-weight: bold;
			color: #000000;
			margin-bottom: 16upx;
		}
		.bottom-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.box-time{
				font-size: 24upx;
				color:#999999;
				margin-bottom: 8upx;
			}
			.box-text{
				display: flex;
				text{
					font-size: 24upx;
					color:#999999;
					margin-right: 8upx;
				}
				
			}
			.button{
				font-size: 24upx;
				color:#ffffff;
				background-color:#173B42  ;
				border-radius: 4upx;
				padding:8upx 16upx;
			}
			.disBtnColor{
				background-color: #eeeeee;
				color:#999999;
			}
		}
	}

}

.amount_unit {
	position: relative;
	top: 21upx;
	font-size: 32upx;
	color: #173B42;
	margin-right: 3upx;
	line-height: 1;
}

.realAmount {
	font-size: 56upx;
	font-weight: bold;
	font-family:  Eras Bold ITC, Eras Bold ITC-Regular;
	color: #173B42;
	text-align: center;
	line-height: 1;
	// letter-spacing: -11upx;
}

.useInfo {
	margin-top: 15upx;
	font-size: 24upx;
	font-family: PingFang SC, PingFang SC-Bold;
	color:#173B42;
}

.activity-name {
	margin-top: 40upx;
	color: #333;
	font-size: 20upx;
	font-weight: bold;
	font-family: PingFang SC, PingFang SC-Bold;
}


.useTypeName {
	margin-top: 10upx;
	color: #666;
	font-size: 16upx;
}

.time {
	margin-top: 10upx;
	color: #666;
	font-size: 16upx;
}

.conponType {
	font-size: 20upx;
	color: #666;
}

.arrow {
	width: 18upx;
	height: 18upx;
	margin-right: 48upx;
}

.conponType1 {
	color: #666;
	font-size: 22upx;
	padding: 4upx 20upx 8upx;
	background-color: #FFF9E0;
	border-radius: 0 0 28upx 28upx;
}

// .button {
// 	width: 180upx;
// 	height: 56upx;
// 	line-height: 56upx;
// 	background: linear-gradient(0deg,#009B01 0%, #FFBC83 100%);
// 	border-radius: 28upx;
// 	margin-top: 30upx;
// 	text-align: center;
// 	font-size: 24upx;
// 	color: #FFFDC2;
// }

.descWrap {
	display: flex;
	background-color: #FCFCFC;
	padding: 40upx 20upx 30upx;
	position: relative;
	top: -23upx;
	z-index: -1;
}

.descTitle {
	display: inline-block;
	font-size: 20upx;
	color: #666;
	width: 150upx;
	text-align: right;
}

.descContent {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	margin-left: 10upx;
}


.desc1 {
	font-size: 20upx;
	color: #666;
}

.desc2 {
	font-size: 20upx;
	color: #009B01;
}

.desc-item {
	margin-top: 18upx;
}

.examples {
	font-size: 24upx;
	font-family: PingFang SC, PingFang SC-Bold;
	font-weight: bold;
	text-align: left;
	color: #009B01;
	margin-top: upx;
	border: none;
}

 button::after{
    border: none;
}

.statusWrap {
	margin-top: 12upx;
	width: 112upx;
	height: 112upx;
	border: 1upx dashed #b0b0b0;
	border-radius: 56upx;
	font-size: 18upx;
	color: #A4A4A4;
	letter-spacing: 2upx;
	line-height: 112upx;
	align-self: center;
	text-align: center;
	font-weight: bold;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
}


</style>

